
<style>
    .el-upload input[type=file] {
        display: none;
    }

    .el-upload__text {
        color: #606266;
        font-size: 14px;
        text-align: center;
    }
</style>
<div id="passApp">
    <div class="el-dialog__header">
        <button type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close" class="el-dialog__headerbtn"><i
                class="el-dialog__close el-icon el-icon-close"></i></button>
        <h4 class="modal-title">个人信息</h4>
    </div>
    <div class="modal-body">
            <el-form :model="formData" ref="editForm" :rules="editRules" size="small" label-width="80px">
                <el-row :span="24">
                    <el-col :span="12" v-if="formData.unit">
                        <el-form-item  prop="parentUnit" label="所属单位" label-width="80px">
                        {{formData.unit.name}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="loginname" label="用户名">
                        {{formData.loginname}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="username" label="姓名">
                            <el-input maxlength="20" placeholder="姓名"
                                      v-trim v-model="formData.username"
                                      auto-complete="off" tabindex="3" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="mobile" label="手机号码">
                            <el-input maxlength="20" placeholder="手机号码"
                                      v-trim v-model="formData.mobile"
                                      auto-complete="off" tabindex="6" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="email" label="邮箱">
                            <el-input maxlength="100" placeholder="邮箱"
                                      v-trim v-model="formData.email"
                                      auto-complete="off" tabindex="7" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="school" label="学校">
                            <el-input maxlength="20" placeholder="学校"
                                      v-trim v-model="formData.school"
                                      auto-complete="off" tabindex="6" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="major" label="专业">
                            <el-input maxlength="16" placeholder="专业"
                                      v-trim v-model="formData.major"
                                      auto-complete="off" tabindex="6" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="qualification" label="学历">
                            <el-input maxlength="16" placeholder="学历"
                                      v-trim v-model="formData.qualification"
                                      auto-complete="off" tabindex="6" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="filePath" label="签名照">
                            <!--修改修改修改修改修改修改修改修改修改-->
                            <el-upload
                                    class="upload-demo"
                                    action="${base}/open/file/upload/file1"
                                    name="Filedata"
                                    :drag="isDrag"
                                    :before-upload="beforeUpload"
                                    :on-success="function(resp,file,fileList){return handleSuccess(resp,file,fileList)}"
                                    :on-progress="uploadFileProcess"
                                    style="height:180px;"
                                    :on-remove="handleRemove"
                                    :file-list="fileList"
                                    :limit="1"
                                    list-type="picture"
                            >
                                <i class="el-icon-upload" v-if="!formData.fileId || formData.fileId==''"></i>
                                <div class="el-upload__text" v-if="!formData.fileId|| formData.fileId==''">
                                    将文件拖到此处，或<em>点击上传</em>
                                </div>
                                <el-progress v-if="fileUploadFlag == true" type="circle" :percentage="fileUploadPercent" style="margin-top:20px;"></el-progress>
                            </el-upload>
                            <div  v-if="!formData.fileId|| formData.fileId==''" >
                                1、只能上传 .png 文件，
                                2、文件不可直接改后缀名，需要另存为png格式，否则word无法识别，
                                3、不超过300kb
                                4、建议图片最小尺寸为240*100左右，或它锁定横竖比例大小，注意图片太大会影响报告中加入电子签名的速度。
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="filePath" label="相关证书">
                            <el-upload
                                    class="upload-demo"
                                    name="Filedata"
                                    action="${base}/open/file/upload/file1"
                                    :on-remove="fileHandleRemove"
                                    :before-remove="fileBeforeRemove"
                                    :on-success="fileHandleSuccess"
                                    multiple
                                    :limit="10"
                                    :on-exceed="fileHandleExceed"
                                    :file-list="filesList">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
    </div>
    <div class="el-dialog__footer">
        <span class="dialog-footer">
            <button type="button" class="el-button el-button--default" data-dismiss="modal">
                <span>关 闭</span>
            </button>
            <button type="button" class="el-button el-button--primary" @click="doEdit">
                <span>保 存</span>
            </button>
        </span>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#passApp',
        data: function () {
            return {
                formData: {},
                fileList:[],
                filesList:[],
                fileUploadFlag:false,//是否正在上传
                fileUploadPercent:0,
                isDrag:true,
                baseUrl:"${base}/open/file/view/image?param=",
                editRules: {
                    username: [
                        {required: true, message: '姓名', trigger: ['blur', 'change']}
                    ],
                        email: [
                        {required: false, message: '邮箱地址', trigger: ['blur', 'change']},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                        mobile: [
                        {required: false, message: '手机号码', trigger: ['blur', 'change']},
                        {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码'}
                    ],
                        rolesIds:[{required: true, message: '角色', trigger: ['blur', 'change']}]
                },
            }
        },
        created: function () {
          this.openEdit();
        },
        methods: {
            openEdit(){
                var self = this;
                $.post(base + "/platform/sys/user/thisEdit", {}, function (data) {
                    if (data.code == 0) {
                        self.formData = data.data;//加载后台表单数据
                        self.setfileFile(self.formData.files)
                        self.listFile();
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },

            doEdit: function () {
                var self = this;
                self.$refs["editForm"].validate(function (valid) {
                    if (valid) {
                        $.post(base + "/platform/sys/user/editDo",{userInfo: JSON.stringify(self.formData),rolesIds: self.formData.rolesIds}, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: "保存成功！",
                                    type: 'success'
                                });
                                $('#homeDetail').modal('hide');
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },


            beforeUpload: function (file) {
                var isLt5M = file.size / 1024 / 1024 < 0.3;
                console.log(file.size / 1024 / 1024)
                var type= file.name.substring(file.name.lastIndexOf("."), file.name.length);
                this.$set(this.formData.signatureImage, "fileBeforeName",file.name);
                if (!(type==".png")) {
                    this.$message.error('只可上传png格式图片');
                    return false;
                }
                if (!isLt5M) {
                    this.$message.error('文件大小不能超过300kb');
                    return false;
                }
                return true;
            },
            handleRemove:function(file, fileList){
                this.$set(this, "isDrag", true);
                this.formData.fileId = "";
                this.fileList=[];
            },
            handleSuccess: function (response, file, fileList) {
                if (response.code == 0) {
                    this.formData.fileId = response.data.id;
                    this.isDrag=false;
                } else {
                    this.$message({
                        message: response.msg,
                        type: 'error'
                    });
                    this.formData.fileId = "";
                    this.fileList=[];
                }
                this.fileUploadFlag=false;
            },
            //进度条
            uploadFileProcess:function(event, file, fileList){
                this.fileUploadFlag=true;
                this.fileUploadPercent = parseInt(event.percent);
            },
            listFile:function(){
                var self = this;
                self.fileList=[];
                if (self.formData.signatureImage){
                    var fileInfo={name: self.formData.signatureImage.fileBeforeName, url: self.baseUrl+self.formData.fileId};
                    self.fileList.push(fileInfo);
                    //self.isDrag=false;
                    self.$set(this, "isDrag", false);
                }else {
                    self.formData.signatureImage={
                        infoType:"signature",
                        fileSize: 0,
                        fileType:"",
                        fileBeforeName:"",
                        fileName:"",
                        filePath: "",
                        fileUrl:""
                    }
                }
            },

            fileHandleRemove: function (file, fileList) {
                var self = this;
                var thisData = file.response.data;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/open/file/upload/delFile/"+thisData.id, {}, function (data) {
                    if (data.code == 0) {
                        sublime.closeLoadingbar();//关闭loading
                        self.$message({message: data.msg,type: 'success'});
                        if(self.formData.files && self.formData.files!=""){
                            if(self.formData.files.split(",").length>1){
                                self.formData.files = self.formData.files.replace(","+thisData.id,"");
                            }else{
                                self.formData.files = "";
                            }
                        }
                    } else {
                        self.$message({message: data.msg,type: 'error'});
                    }
                }, "json");
            },
            fileHandleExceed: function (files, fileList) {
                this.$message.warning(`当前限制选择 10 个文件，本次选择了 `+files.length+` 个文件，共选择了 `+(files.length + fileList.length)+` 个文件`);
            },
            fileBeforeRemove: function (file) {
                return this.$confirm(`确定移除 `+file.name+`？`);
            },
            fileHandleSuccess:function(file){
                if(this.formData.files && this.formData.files!=""){
                    this.formData.files += ","+file.data.id;
                }else{
                    this.formData.files = file.data.id;
                }
            },
            setfileFile: function (fileId) {
                var self = this;
                self.filesList=[];
                if(fileId && fileId!=""){
                    var fileIds = fileId.split(",")
                    for(var i=0;i<fileIds.length;i++){
                        $.post(base + "/open/file/upload/getFile/"+fileIds[i], {}, function (data) {
                            if (data.code == 0) {
                                var file = {
                                    name:data.data.fileBeforeName,
                                    response:{
                                        data:data.data
                                    }
                                }
                                self.filesList.push(file);
                            } else {
                                self.$message({message: data.msg,type: 'error'});
                            }
                        }, "json");
                    }

                }
            },
        }
    });
</script>
